<template>
  <div class="hw">
    <h1>{{ msg }}</h1>

    <h3>{{ title }}</h3>

    <button @click="state.count++">count is: {{ state.count }}</button>
    <!-- 点击子组件里面的按钮触发父组件的方法 -->
    <button @click="onclick">子调父方法</button>

    <!-- 获取用户 -->
    <div>
      <el-button @click="getRole">获取用户</el-button>
    </div>
    <!-- vuex中的数据 -->
    <div>
      这是vuex中的数据
      <!-- 行内使用 -->
      <span @click="$store.commit('add', 5)">{{ $store.state.count }}</span>
    </div>

    <el-input></el-input>
  </div>
</template>

<script setup>
import { defineProps, reactive, defineEmit, useContext } from "vue";
import http from "axios";
// js 中使用 store
import { useStore } from "vuex";

let store = useStore();
// 调用 vuex 中定义的方法,第二个为参数
store.commit("add", 10);
// 读取 veux 中的属性值
console.log(store.state.count, "js中打印的vuex中的值"); // => 10

// 外界的输入集合，外界所有的输入都可以通过 props 获取到
const props = defineProps({
  msg: String,
  title: String,
});

console.log(props.msg); //=> Hello Vue 3 + Vite

// 导出方法集合
const emit = defineEmit(["hwclick"]);

// 点击子组件里面的按钮派发一个 hwclick 方法
function onclick() {
  // console.dir(ctx);
  // emit("hwclick");
  // 也可以用这种方法调用父组件方法
  ctx.emit("hwclick");
}
// 声明响应式对象
const state = reactive({ count: 0 });

// 获取上下文
const ctx = useContext();
// 使用上下文中的 expose 导出内容
ctx.expose({
  hwexposefun() {
    console.log("这段话是父组件调用子组件打印出来的");
  },
  name: "我是helloworld子组件",
});

const getRole = () => {
  http.get("/api/getUsers?id=123").then((res) => {
    console.log(res.data);
  });
};
</script>

<style scoped>
.hw {
  text-align: center;
}
</style>
